@use '../defs';

.rel {
	display: grid;
	margin-bottom: 1em;
	margin-top: 1em;

	@include defs.wide() {
		gap: 16px;
		grid-template-columns: repeat(2, 1fr);
	}
	@include defs.nonwide() {
		gap: 8px;
		grid-template-columns: repeat(1, 1fr);
	}
}
.relItem {
	align-items: stretch;
	display: flex;

	a#{&}_anchor {
		align-items: center;
		background-color: var(--bg-color-action);
		border-radius: 6px;
		color: var(--fg-color);
		display: flex;
		flex: 1;
		padding: 24px 32px;
		text-decoration: none;

		&:focus,
		&:hover {
			background-color: var(--bg-color-action-active);
		}
	}
	&_icon {
		align-items: center;
		border: transparent solid 2px;
		border-radius: 50%;
		display: flex;
		height: 2em;
		justify-content: center;
		opacity: 0.5;
		width: 2em;

		&#{&}-circle {
			border-color: currentColor;
		}
	}
	&_text {
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	&_icon + &_text,
	&_text + &_icon {
		margin-left: 32px;
	}
	&#{&}-oneline a#{&}_anchor {
		justify-content: center;
	}
	&_title {
		font-weight: 500;
	}
	&_detail {
		color: var(--fg-color-secondary);
		line-height: 1.3;
		margin-top: 8px;
	}
}
